<template>
  <div class="lead-in">
    <div class="btn-wrap">
        <el-button type="info"
                   class="temp-download primary_btn">
          <a v-if="type === 'email'" :href="(lang === 'zh_CN' || lang === 'zh_TW') ? '/static/template/quickreply_template_email_zh_CN.xlsx' : '/static/template/quickreply_template_email_en.xlsx'" download>{{$t('config.channel.downloadImport')}}</a>
          <a v-if="type === 'webchat'" :href="(lang === 'zh_CN' || lang === 'zh_TW') ? '/static/template/quickreply_template_zh_CN.xlsx' : '/static/template/quickreply_template_en.xlsx'" download>{{$t('config.channel.downloadImport')}}</a>
        </el-button>
        <!--饿了么上传组件-->
        <el-upload class = "temp-upload"
          :action = "uploadUrl"
          name = "upload"
          accept = ".xls,.xlsx"
          :data = "uploadHeaders"
          :with-credentials = "true"
          :on-success = "handleSuccess"
          :before-upload = "beforeUpload"
          :show-file-list = "false">
          <el-button class = "primary_btn" type="primary">{{$t('config.channel.ImportTemplateFile')}}</el-button>
          <span class="fileName">{{fileMes.trueName}}</span>
        </el-upload>
        <div class="imp">
          <el-button @click = "lindInTem"
                     class = "temp-download primary_btn">{{$t('config.channel.ImportTemplate')}}</el-button>
        </div>
      </div>
      <div class="instructions">
        <p v-for="item in explain">{{item}}</p>
      </div>

  </div>
</template>
<script>
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: '',
    data () {
      return {
        uploadUrl: '/fileUpload',
        uploadHeaders: {
          type: '',
          module: 'quickReply',
          sessionId: this.$store.state.session.sessionId
        },
        fileMes: {},
        explain: [this.$t('webchat.Description'), this.$t('webchat.monitor1'), this.$t('webchat.monitor2'), this.$t('webchat.monitor3'), this.$t('webchat.monitor4')]
      }
    },
    components: {
    },
    props: {
      type: {
        type: String,
        default: function () {
          return ''
        }
      },
      dataType: {
        type: String,
        default: function () {
          return ''
        }
      }
    },
    computed: {
      lang() {
        return window.localStorage.lang || 'zh_CN'
      }
    },
    methods: {
      beforeUpload (file) {
        let arr = file.name.split('.')
        let arrType = ['xls', 'xlsx']
        if (arrType.indexOf(arr[arr.length - 1]) !== -1) {
          return true
        } else {
          this.$message.error(this.$t('sms.uploadFileWrong'))
          return false
        }
      },
//      上传成功
      handleSuccess (response, file, fileList) {
        let index = response.filePath.split('/').length - 1
        let data = {
          trueName: response.fileName,
          fileName: response.filePath.split('/')[index]
        }
        this.fileMes = deepClone(data)
        this.$store.dispatch('getXlsHeads', data).then(res => {
          if (res.success) {
            this.fileMes.xlsHeads = `[${res.heads.toString()}]`
          }
        })
      },
      lindInTem () {
        let obj = {
          moduleType: 'webchat'
        }
        let action = 'quickReplyImportNew'
        if (this.type === 'webchat' && this.dataType === 'customize') {
          action = 'quickReplyAgentImport'
        }
        if (this.type === 'email') {
          obj.moduleType = 'email'
          action = 'quickReplyImportMail'
        }
        let data = Object.assign(obj, this.fileMes)
//        此处为邮件模块，暂用旧的接口处理
        this.$store.dispatch(action, data).then(res => {
          if (res.success) {
            this.$message.success(this.$t('config.channel.ImportTemplateSuccess'))
            this.$emit('lindInTemSuc')
          }
        })
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .lead-in
    width 67%
    // margin 0 auto
    padding 20px 16px
    .btn-wrap
      padding-bottom 10px
      overflow hidden
      .imp
        margin-top 10px
      .temp-download
        a
          color #fff
      .temp-upload
        display inline-block
        margin-left 20px
        .temp-upload-btn
          font-size 12px
          padding 8px 15px
    .instructions
      clear both
      font-size 12px
      line-height 22px
      color $cf-blue
      margin-bottom 20px
  .fileName
    margin-left 10px
</style>
